<template>
  <section class="content" id="content">

    <el-card shadow="never">
      <!-- 检索条件 -->
      <lq-form :form="form" ref="searchFormRef"></lq-form>
      <template #footer>
        <el-button type="primary" size="small" plain @click="doQuery">查询</el-button>
        <el-button type="success" size="small" plain @click="doAdd"> 新增</el-button>
        <el-button type="warning" size="small" plain @click="doReset"> 重置查询条件</el-button>
      </template>
    </el-card>

    <!-- 数据列表 -->
    <el-card id="table" shadow="never" style="margin-top: 10px">
      <!--
            <template #header>
              <div class="card-header">

              </div>
            </template>
      -->


      <lq-table ref="tableRef"
                :columns="columns"
                :records="tableData.records"
                size="default"
                :border="true"
                :header-cell-style="{background:'#e1eaf6', color:'#333333'}"
                :stripe="true"
                :pagination="paginationProps"
                @on-selections="doSelectionChange"
                @on-pagination="doCurrentChange"
      >

        <template #operate="scope">
          <el-space size="default">
            <el-button link type="success" @click="doEdit(scope.row.id)">编辑</el-button>
            <el-button link type="warning" @click="doRemove(scope.row.id)">删除</el-button>
          </el-space>
        </template>

      </lq-table>
    </el-card>

    <!-- 新增或者编辑对话框-->
    <el-dialog v-model="dialog.visible"
               v-bind="{...dialog.innerAttrs}"
               v-on="dialog.events">
      <ResidentInfoForm  ref="addEntityFormRef" @close="doClose" @flush="doFlush"  @flush-and-close="doFlushAndClose"/>

    </el-dialog>


  </section>
</template>
<script setup lang="ts">
/**
 * --------------相关组件引入--------------------------
 */
import {ref, reactive, onMounted, getCurrentInstance, nextTick} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import $Api from '@/request/api'

import LqForm from "@/components/common/LqForm.vue";
import LqTable from "@/components/common/LqTable.vue";
import ResidentInfoForm from "@/views/residentInfo/ResidentInfoForm.vue";


/**
 * ---------------状态变量定义-------------------------
 */
//获取表格组件实例
const tableRef = ref();

//获取新增或编辑窗口组件实例
const addEntityFormRef = ref();

const  searchFormRef=ref()

const form = ref({
  innerAttrs: {
    labelPosition: 'right',
    labelWidth: 80,
  },
  model: {
    name: "",
    idCard: "",
    telephone: "",
    region: "",


  },
  formItems: [

    {type: 'input', label: '姓名: ', prop: 'name', span: 6, maxlength: 30, placeholder: ''},
    {type: 'input', label: '身份证号: ', prop: 'idCard', span: 6, maxlength: 20},
    {type: 'input', label: '电话: ', prop: 'telephone', span: 6, maxlength: 20},
    {
      type: 'select',
      label: '所在地区: ',
      prop: 'region',
      span: 4,
      options: [{label: '阿拉尔', value: '阿拉尔'}, {label: '阿克苏', value: '阿克苏'}],
    },


  ],
  buttonsAttrs: {
    align: 'left'
  }
});

/**
 * 表格
 */
const tableData = ref({
  records: [],
  pageSize: 10,
  tableSize: 'default',
  border: true,
});

//分页信息
const paginationProps = reactive({
  pageSize: tableData.value.pageSize,
  pageSizes: [5, 10, 20, 50, 100],
  total: 0,
  pageNum: 1,
  paginationAlign: 'right',
  defaultPageSize: 10
});

const resetPagination = () => {
  paginationProps.pageNum = 1;
  paginationProps.pageSize = tableData.value.pageSize;
  paginationProps.total = 0;
};

const columns = [
  {label: '', type: "selection", width: 40},
  {label: '序号', type: "index", width: 80},
  {label: '姓名', prop: 'name', minWidth: 200},
  {label: "性别", prop: 'gender', minWidth: 80},
  {label: '年龄', prop: 'age', minWidth: 120},
  {label: "身份证号", prop: 'idCard', minWidth: 250},
  {label: "所在地区", prop: 'region', minWidth: 100},
  {label: "民族", prop: 'nation', minWidth: 100},
  {label: "电话", prop: 'telephone', minWidth: 100},
  {label: '操作', prop: 'id', slotName: 'operate', slotted: true, align: 'center', fixed: 'right', minWidth: 150},
]


onMounted(() => {
  doQuery();

})

/**
 * 查询
 */
const doQuery = () => {
  $Api.residentInfo.getResidentInfosPage(Object.assign({}, form.value.model,
      {
        pageNum: paginationProps.pageNum,
        pageSize: paginationProps.pageSize
      }))
      .then((data) => {
        tableData.value.records = data.records;
        paginationProps.total = data.total;
      })

}

const dialog = ref({
  visible: false,
  innerAttrs: {
    id: 'addDialog',
    class: 'addDialog',
    title: '居民信息表',
    width: "80%",
    top: '1vh'
  },
  events: {
    open: () => {
      console.log('dialog open.....');

    },
    close: () => {
      console.log('dialog close.....');

    },
  }
})




const  doCurrentChange =()=>{
  doQuery();

}


/**
 * 重置查询条件
 */
const  doReset=()=>{
  searchFormRef.value?.resetFields();

}

/**
 * 添加
 */
const doAdd = () => {
  dialog.value.visible=true;
  nextTick(()=>{
    addEntityFormRef.value.doReset()
  })

}

const doEdit =(id)=>{

  dialog.value.visible=true;
  nextTick(()=>{
    addEntityFormRef.value.doViewOrEdit(id, "edit")
  })

}

const doRemove =()=>{


}

const  doClose=()=>{
  dialog.value.visible=false;
}


const doFlush=()=>{
  doQuery();
}

const  doFlushAndClose =()=>{
  doQuery();
  dialog.value.visible=false;
}


</script>

<style>

</style>
